import React, { PureComponent } from 'react';
import { Modal, Card, Table, Popconfirm, Icon, Button, message } from 'antd';
import { queryProduct, addProduct, updateProduct, deleteProduct } from '../../services/api';
import { Edit } from './Edit';

class List extends PureComponent {
    state = {
        title: '编辑',
        modal: false,
        pagination: {},
        loadding: true,
        item: {}
    }

    componentDidMount() {
        this.getDate();
    }

    componentWillUnmount() {

    }

    hideModal = () => {
        this.setState({
            modal: false,
            item: {}
        })
    }

    getDate = () => {
        this.setState({
            loadding: true
        })
        const pagination = { ...this.state.pagination };
        pagination.total = 200;
        queryProduct().then(ret => {
            this.setState({
                pagination: pagination,
                loadding: false,
                list: ret.list
            })
        })
    }

    goAdd = (item) => {
        this.setState({
            title: '新增',
            modal: true,
            item: {}
        })
    }

    goEdit = (item) => {
        this.setState({
            title: '编辑',
            modal: true,
            item: item
        })
    }

    goDelete = (id) => {
        let { dispatch } = this.props;
        deleteProduct().then(ret => {
            console.log(`ret:${JSON.stringify(ret)}`)
            if (ret.code == 0) {
                this.getDate();
                message.success(ret.msg);
            }
        })
    }

    handleSave = (formdata) => {
        console.log(`formdata:${JSON.stringify(formdata)}`)
    }



    render() {
        const { title, modal, list, loadding, pagination, item } = this.state;
        const columns = [{
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '值',
            dataIndex: 'value',
            key: 'value',
        }, {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
        },
        {
            title: 'operation',
            dataIndex: 'operation',
            render: (text, record) => {
                const { _id } = record;
                return (
                    <div className="editable-row-operations">
                        <a onClick={() => this.goEdit(record)}><Icon type="edit" /></a>
                        <Popconfirm title="Sure to delte?" onConfirm={() => this.goDelete(_id)}>
                            <a href='javascript:;' style={{ marginLeft: "15px" }}><Icon type="delete" /></a>
                        </Popconfirm>
                    </div>
                );
            }
        }];

        return (<div style={{ background: '#ECECEC', padding: '30px' }}>
            <Card title="标题" bordered={false}>
                <p>
                    <Button type="primary" onClick={this.goAdd}><Icon type="file-add" /> 新增</Button>
                </p>
                <Table
                    dataSource={list}
                    columns={columns}
                    loading={loadding}
                    pagination={pagination}
                />
            </Card>
            <Modal
                title={title}
                footer={null}
                visible={modal}
                onCancel={this.hideModal}
            >
                <Edit item={item} callback={this.handleSave} />
            </Modal>
        </div>);
    }
}

export default List;